import React from 'react';
import 'antd/dist/antd.css';
import { Comment, Avatar, Form, Button, List, Input, Pagination, message } from 'antd';
import moment from 'moment';
import { connect } from 'react-redux';
import axios from '_axios@0.21.1@axios';

const { TextArea } = Input;

const CommentList = ({ comments, total, handleDelete }) => (
  <List
    dataSource={comments}
    header={`共${total}条评论`}
    itemLayout="horizontal"
    renderItem={props => <Comment {...props} actions={[<span onClick={()=>{handleDelete(props.key)}}>删除</span>]} />}
  />
);



const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
        发布
      </Button>
    </Form.Item>
  </>
);

class App extends React.Component {
  state = {
    comments: [],
    submitting: false,
    value: '',
    pagination: {
      pageNo: 1,
      pageSize: 4,
    },
    total:0,
    count:1,
  };

  componentDidMount = () => {
    this.getData().then((res) => {
      this.setState({
        total: res.data.total,
        comments: res.data?.rows?.map((value, index, array) => {
          return {
            key:value.key,
            author: value.username,
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: value.content,
            datetime: moment(value.time).fromNow(),
          }
        })
      })
    })
  }

  getData = (param = this.state.pagination) => {
    return axios.post('http://127.0.0.1:8080/tcomment/query', param)
  }



  handleSubmit = () => {
    if (!this.state.value) {
      return;
    }

    this.setState({
      submitting: true,
    });

    axios.post('http://127.0.0.1:8080/tcomment/create',{
      id: this.props.id,
      content: this.state.value
    })

    this.getData().then((res) => {
      
      this.setState({
        submitting: false,
        total: res.data.total,
        comments: res.data?.rows?.map((value, index, array) => {
          console.log("key",value.id+value.time)
          console.log(value.time.toString())
          return {
            key:value.key,
            author: value.username,
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: value.content,
            datetime: moment(value.time).fromNow(),
          }
        })
      })
      message.success("评论发布成功");
    })
    this.setState({
      value:"",
    })
  };

  onChange = (pageNo, pageSize)=>{
    console.log(pageNo,pageSize, this.state.total)
    this.setState({
      pagination:{
        pageNo:pageNo,
        pageSize: 4,
      }
    })
    this.getData({
      pageNo:pageNo,
      pageSize: 4,
    }).then((res) => {
      this.setState({
        submitting: false,
        total: res.data.total,
        comments: res.data?.rows?.map((value, index, array) => {
          return {
            key:value.key,
            author: value.username,
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: value.content,
            datetime: moment(value.time).fromNow(),
            
          }
        })
      })

    })
  }

  handleDelete = (id) => {
    axios.post('http://localhost:8080/tcomment/delete',{id:id}).then(()=>{
      message.success("删除成功");
      // this.setState({
      //   count: ++this.state.count,
      // })
      this.getData().then((res) => {
        this.setState({
          total: res.data.total,
          comments: res.data?.rows?.map((value, index, array) => {
            return {
              key:value.key,
              author: value.username,
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: value.content,
              datetime: moment(value.time).fromNow(),
            }
          })
        })
      })
    })
  }

  handleChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const { comments, submitting, value, total, count } = this.state;

    return (
      <>
        {comments?.length > 0 && count && <CommentList comments={comments} total={total} handleDelete={this.handleDelete} />}
        <Pagination showQuickJumper defaultCurrent={1} total={this.state.total} onChange={this.onChange} pageSize={4} />

      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    username: state?.username,
    id: state?.id
  }
}

export default connect(mapStateToProps)(App);